@mixin ready() {
    $active-radio-color: rgb(14, 187, 104);
    $radio-border: 5px;
    $radio-width: 25px;
    $radio-height: 25px;
    $radio-inner-width: 15px;
    $radio-inner-height: 15px;
    $radio-inner-position: 5px _ _ 5px;
    $radio-size:  $radio-width + $radio-border * 2;
    $label-padding-left: $radio-size + 20px;
    $label-padding-top: 5px;


    .auc-radio {
        position: relative;
        height: $radio-size;
        > label{
            display: block;
            position: relative;
            padding-left: $label-padding-left;
            padding-top: $label-padding-top;
            z-index: 9;
            cursor: pointer;
            transition: all 0.25s linear;
        }
        
        &__check{
            display: block;
            position: absolute;
            border: $radio-border solid #AAAAAA;
            border-radius: 100%;
            height: $radio-height;
            width: $radio-width;
            z-index: 5;
            top: 0;
            transition: border .25s linear;
            box-sizing: content-box;
        }

        &__check::before {
            display: block;
            position: absolute;
            content: '';
            border-radius: 100%;
            height: $radio-inner-height;
            width: $radio-inner-width;
            position: $radio-inner-position;
            margin: auto;
            transition: background 0.25s linear;
        }
    
        
        > input[type=radio]{
            position: absolute;
            visibility: hidden;
        }
        
        input[type=radio]:checked ~ &__check {
            border: 5px solid $active-radio-color;
        }
        
        input[type=radio]:checked ~ &__check::before{
            background: $active-radio-color;
        }
        
        input[type=radio]:checked ~ label{
            color: $active-radio-color;
        }
    }
}

@include ready();